<template>
  <div class="component-allotMaterialList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            <span v-if="$route.params.loop==1" ><a @click="$router.go(-2)">库存</a> > <a  @click="$router.go(-1)"> 查看记录</a> >  采购入库 </span>
            <span v-else>采购入库</span>
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div class="container">
      <div>
        <div class="table-title">
          <p>
            <span class="iconfont">&#xe607;</span> 采购材料信息填写
          </p>
          <div class="btn-group-right" v-if="$route.params.flag == 0">
            <span @click="save">入库</span>
          </div>
        </div>
        <div class="tables">
          <table cellpadding="0" cellspacing="0" border="1">
            <tr>
              <td>采购单号</td>
              <td>
                <el-select :disabled="write" v-model="option" @change="selectList" v-if="$route.params.flag == 0" clearable placeholder="请选择采购单号" style="margin-left: -89px;width:320px;">
                  <el-option v-for="(item,index) in options" :key="index" :label="item.buyNo" :value="item.buyId"></el-option>
                </el-select>
                <el-input v-else v-model="info.buyNo" :disabled="write"></el-input>
              </td>
              <td>申请人</td>
              <td>
                <el-input v-model="info.applyUser" :disabled="write"></el-input>
              </td>
            </tr>
            <tr>
              <td>入库单号</td>
              <td>
                <el-input v-model="info.inOrder" :disabled="write"></el-input>
              </td>
              <td>采购人</td>
              <td>
                <el-input v-model="info.responseUser" :disabled="write"></el-input>
              </td>
            </tr>
            <tr>
              <td>采购总额</td>
              <td>
                <el-input v-model="info.buyMoney" :disabled="write"></el-input>
              </td>
              <td>签收单据</td>
              <td>
                <div v-if="$route.params.flag == 0">
                  <el-upload
                    class="upload-demo"
                    action="/api/web/sysFile/uploadFile"
                    :headers="myheader"
                    :data="exe_data"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="successFile"
                    :before-remove="beforeRemove"
                    :before-upload="beforeAvatarUpload"
                     multiple
                    accept=".jpg,.png,.JPG,.PNG"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">上传文件</el-button>
                    <div slot="tip" style="color: #ccc;" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
                  </el-upload>
                </div>
                <div v-else class="pictureLength">
                  <div style="cursor: pointer;" @click="imgFlag = !imgFlag">{{info.fileName}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>仓储位置</td>
              <td>
                <el-select :disabled="write" v-model="info.storeName" clearable placeholder="请选择仓储位置" style="margin-left: -89px;width:320px;">
                  <el-option v-for="(item,index) in locationList" :key="index" :label="item.storeName" :value="item.storeId"></el-option>
                </el-select>
                <!--<el-input v-else v-model="info.buyNo" :disabled="write"></el-input>-->
              </td>
              <td></td>
              <td>
                <!--<el-input v-model="info.proNo" disabled></el-input>-->
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="margin-top:20px;">
        <div class="table-title">
          <p>
            <span class="iconfont">&#xe607;</span> 材料清单
          </p>
        </div>
        <div class="table procurementListTable">
          <el-table
            ref="multipleTable"
            :data="materialList"
            tooltip-effect="dark"
            style="width: 1100px;margin:0 auto"
            border
          >
            <el-table-column label="序号" align="center" type="index"></el-table-column>
            <el-table-column label="材料名称" align="center" prop="matName"></el-table-column>
            <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
            <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
            <el-table-column label="单价" align="center" prop="price"></el-table-column>
            <el-table-column label="预计采购数量" align="center" prop="planNum"></el-table-column>
            <el-table-column label="实际采购数量" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.realNum"
                  controls-position="right"
                  :disabled="$route.params.flag == 1"
                  :min="1"
                  style="width:120px;border:1px solid #e4e4e4;border-radius: 4px;"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="金额" align="center" prop="realMoney">
              <template slot-scope="scope">
                {{scope.row.realMoney = scope.row.realNum * scope.row.price | numFilter}}
              </template>
              <!--<template slot-scope="scope">
                <el-input
                  v-model="scope.row.realMoney = scope.row.realNum * scope.row.price"
                  readonly="readonly"
                  style="width:120px;border:none;text-align: center;"
                ></el-input>
              </template>-->
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--图片预览-->
    <div class="component-model">
      <el-dialog title="预览" :visible.sync="imgFlag" width="600px">
        <img :src="exe_img + info.fileUrl" style="max-width: 500px;">
      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      myheader:{token:localStorage.getItem("token")},
      materialList: [],  // 材料清单
      options:[],//采购单号列表
      option:'',//选择采购单号
      location:'',//选择仓储位置
      locationList:[],//仓储列表
      info:{//采购材料信息填写
        buyNo:'',
        applyUser:'',
        inOrder:'',
        responseUser:'',
        buyMoney:'',
        proNo:''
      },
      // 是否可编辑
      write: true,
      exe_data:{'parentId':this.$route.params.inId,'bizType':'project.outStore'},
      fileList: [],
      exe_img:img_url,
      imgFlag:false,
      delFile:''//删除文件
    };
  },
  mounted(){
//     0-入库  1-查看详情
     if(this.$route.params.flag == 1){
       this.initDetail(); //详情
     }else{
       this.write = false;
       this.buyList();  //采购单号列表
       this.selectLocation();//仓库位置
       if(this.$route.params.undo == 1){
         this.option = this.$route.params.buyNo;
         this.selectList()
       }
     }
  },
  methods: {
    handleRemove(file, fileList) {
      if(file.status == "success") {
        let that = this;
        let suCb = function(res){
          that.fileList=[]
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          parentId:that.$route.params.inId,
          fileUrl:that.delFile
        }
        let palyParam = {
          url: "/api/web/sysFile/deleteFile",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      }else{
        this.fileList=[]
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请先删除再上传`);
    },
    beforeRemove(file, fileList) {
        return true;
//      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    successFile(response, file, fileList){
        this.delFile = file.response.fileUrl;
        this.fileList = fileList;
        console.log(file.response.fileUrl)
    },
    //查看详情
    initDetail(){
      let that = this;
      let suCb = function(res){
        that.info = res.data.data;
        that.materialList = res.data.data.inStoreList
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
          inId:that.$route.params.id
      }
      let palyParam = {
        url: "/api/web/proInStore/selectBuyInStoreDetail",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //采购单号列表
    buyList(){
      let that = this;
      let suCb = function(res){
        that.options = res.data.data;
        console.log(res.data.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {}
      let palyParam = {
        url: "/api/web/proBuyApply/selectBuyNo",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //选择采购单号
    selectList(){
      let that = this;
      let suCb = function(res){
        that.info = res.data;
        that.materialList = res.data.proBuyList;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        buyId:that.$route.params.buyId || that.option
      }
      let palyParam = {
        url: "/api/web/proBuyApply/selectBuyApplyById",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //选择仓储位置
    selectLocation(){
      let that = this;
      let suCb = function(res){
        that.locationList = res.data.data
        console.log(res.data.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/sysStore/selectStoreName",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)

    },
    //入库添加
    inStore(){
      let that = this;
      let suCb = function(res){
        that.$router.push({name:'procurement'});
        console.log(res)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        proInStoreList:that.materialList,
        proInStore:{
          buyId:that.info.buyId,
          formNo:that.info.formNo,
          inOrder:that.info.inOrder,
          toProid:that.info.proNo,
          responseUser:that.info.responseUser,
          inId:that.info.inId
        },
        storeId: that.info.storeName
      }
      let palyParam = {
        url: "/api/web/proInStore/insertBuyInStore",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      };
      console.log(palyParam);
      that.$https(palyParam)
    },
    //点击入库
    save() {
      if(this.info.applyUser == ""||this.info.applyUser==undefined || this.info.inOrder == "" ||this.info.inOrder==undefined|| this.info.responseUser == ""||this.info.responseUser==undefined || this.info.storeName == "" ||this.info.storeName==undefined|| this.fileList.length == 0){
        this.$alert('采购材料信息有空值', '提示', {
          confirmButtonText: '确定',
        });
      }else{
        let newArray = {};
        newArray = this.options.find((item) => {
          if(item.buyNo === this.option || item.buyId === this.option){
            return item
          }
        });
        console.log(newArray)
        this.info["buyId"] = newArray.buyId;
        this.info["formNo"] = newArray.buyNo;
        this.info["inId"] = this.$route.params.inId;
        this.inStore();
      }
    },
  }
};
</script>

<style scoped>
.container {
  width: 1100px;
  margin: 30px auto;
}
.table-title p {
  font-family: "PingFangSC-Regular", "PingFang SC";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-size: 16px;
  color: #666;
  text-align: left;
  line-height: 40px;
}

.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 140px;
  background: #f9fafc;
}

.table-title > div:last-of-type {
  float: right;
  margin: -45px 20px 10px;
}
.table-title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.table-title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.table-title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}

.uploadBtn {
  height: 26px;
  line-height: 26px;
  margin: 7px;
  width: 90px;
  color: #1abc9c;
  border: 1px solid #1abc9c;
  background-color: #fff;
}
.uploadBtn:hover {
  color: #fff;
  background-color: #1abc9c;
}
  a{
    cursor: pointer;
  }
  .upload-demo{
    overflow: hidden;
  }
  .el-upload,.el-upload-list{
    float: left;
  }
</style>
